import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import my from '../views/my.vue'
import login from '../views/login.vue'
import shopcat from '../views/shopcat.vue'
import goodededail from "../views/gooddetail.vue"
import store from "../stores/index"
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: import.meta.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: '首页',
      component: HomeView
    },
    {
      path: '/login',
      name: '登录',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: login
    },
    {
      path: '/goodsdetail',
      name: '商品详情',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: goodededail,
      meta: {
        notabbar: true
      }
    },
    {
      path: '/my',
      name: '个人中心',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: my,
      meta: {
        isAuthor: true,
      }
    },
    {
      path: '/address',
      name: '收货地址',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/address/index.vue'),
      meta: {
        isAuthor: true,  // 加了就有吗?   也是通过某个手段实现
        notabbar: true  // 又是怎么实现?  
        //  发现自己不会  但是知道要做什么功能  
      }
    },
    {
      path: '/addaddress',
      name: '添加收货收货',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/address/addaddress.vue'),
      meta: {
        isAuthor: true,  // 加了就有吗?   也是通过某个手段实现
        notabbar: true  // 又是怎么实现?  
        //  发现自己不会  但是知道要做什么功能  
      }
    },

    {
      path: '/shopcat',
      name: '购物车',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: shopcat,
      meta: {
        isAuthor: true
      }
    }
  ]
})

//  添加一个路由守卫
router.beforeEach((to, from, next) => {


  store.commit('changetitle', to.name)

  if (to.meta.notabbar) {
    //  如果有这个属性. 我们就把tabbar 改成 false
    //  这个时候我们想要通过 store 去更改 ,  此刻 这里的this 不是vue 
    console.log("vuerouter", store);
    store.commit('changetabbar', false)
    // 那么如果我们要控制 store   就必须引用sore 这个文件
  } else {
    store.commit('changetabbar', true)
  }


  if (to.meta.isAuthor) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      next("/login")
    }
  } else {
    next()
  }


})

export default router
